<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>探索型数据分析</title>
    <link rel="stylesheet" href="../static/css/dashboard.css" />
    <!-- 引入 Bootstrap 样式 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- 引入 DataTables 样式 -->
    <link
      href="https://cdn.jsdelivr.net/npm/datatables.net-bs4@1.10.21/css/dataTables.bootstrap4.min.css"
      rel="stylesheet"
    />
    <style>
      /* 自定义样式，确保背景一致 */
      .content-container {
        background-color: white; /* 设置背景色 */
        padding: 20px;
        border-radius: 8px; /* 圆角 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
      }

      .navbar {
        background-color: #343a40;
        color: white;
        padding: 10px;
      }

      .main-content h1 {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .nav-button {
        margin-right: 10px;
      }

      /* 美化表格 */
      .table th,
      .table td {
        text-align: center;
        vertical-align: middle;
        word-wrap: break-word; /* 让长文本在单元格内换行 */
        max-width: 200px; /* 设置最大宽度 */
      }

      .table-bordered {
        border: 1px solid #ddd;
      }

      .table-responsive {
        margin-top: 20px;
        overflow-x: auto; /* 允许横向滚动 */
      }

      /* 提示消息样式 */
      #flash-message {
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 10px;
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
        border-radius: 5px;
      }

      /* 隐藏的选择框 */
      #explore-options {
        display: none; /* 默认隐藏 */
        margin-top: 20px;
      }

      /* 按钮样式 */
      .btn-explore {
        background-color: white;
        color: #007bff;
        border: 2px solid #007bff;
        border-radius: 30px; /* 圆角 */
        padding: 10px 20px;
        font-size: 16px;
        margin: 5px;
        transition: all 0.3s ease;
      }

      .btn-explore:hover {
        background-color: #f1f1f1;
        cursor: pointer;
      }

      .btn-explore.active {
        background-color: #007bff;
        color: white;
        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4); /* 激活时阴影效果 */
      }

      .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 10px; /* 设置按钮之间的间距 */
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="container mt-5">
      <!-- 导航栏 -->
      <nav class="navbar">
        <img
          src="../static/image/cutcamera.png"
          alt="用户头像"
          style="
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
          "
        />
        <a href="{{ url_for('center') }}">
          <button class="nav-button" id="center-btn">个人中心</button>
        </a>
        <a href="{{ url_for('account') }}">
          <button class="nav-button" id="account-btn">账号安全</button>
        </a>
          <a href="{{ url_for('guide') }}">
              <button class="nav-button" id="guide-btn">使用指南</button>
          </a>
        <a href="{{ url_for('crawler') }}">
          <button class="nav-button">评论数据获取</button>
        </a>
        <a href="{{ url_for('exploration') }}">
          <button class="nav-button">探索型数据分析</button>
        </a>
        <button class="nav-button" id="logout-btn">退出登录</button>
      </nav>

      <!-- 主内容区域 -->
      <main class="main-content">
        <h1>探索型数据分析</h1>

        <!-- 内容容器，保持上传表单和表格的背景一致 -->
        <div class="content-container">
          <!-- 文件上传表单 -->
          <form method="POST" enctype="multipart/form-data" class="form-inline">
            <label for="file" class="mr-2">上传CSV/Xlsx文件：</label>
            <input
              type="file"
              id="file"
              name="file"
              accept=".csv,.xlsx"
              required
              class="form-control mr-3"
            />
            <button type="submit" class="btn btn-primary mr-3">上传文件</button>
            <!-- 查看数据按钮 -->
            <button id="view-button" class="btn btn-secondary mr-3">
              查看文件内容
            </button>
            <!-- 数据探索按钮 -->
            <button id="explore-button" class="btn btn-success mr-3">
              数据探索
            </button>
            <!-- 清除缓存按钮 -->
            <button id="Data-clear" class="btn btn-success" mr-3>
              清除缓存
            </button>
          </form>

          <!-- 数据探索选择框 -->
          <div id="explore-options">
            <h3>选择分析或绘图功能：</h3>
            <div class="btn-group" role="group" aria-label="数据探索选项">
              <button type="button" class="btn-explore" id="generate_wordcloud">
                词云图
              </button>
              <button type="button" class="btn-explore" id="generate_wordlist">
                词频统计图
              </button>
              <button type="button" class="btn-explore" id="generate_ScoreList">
                评分统计图
              </button>
              <button type="button" class="btn-explore" id="Sentment_analysis">
                情感分析</button
              >>
              <!-- 更多的选项可以继续添加 -->
            </div>
          </div>
          <div id="exploration-results">
            <!-- 显示生成的词云图 -->
            <img
              id="wordcloud-image"
              style="display: none; width: max-width: 100%; height: auto;"
              alt="词云图"
            />
            <!-- 词频统计图图片 -->
            <img
              id="wordlist-image"
              alt="词频统计图"
              style="display: none; max-width: 100%; height: auto"
            />
            <!-- 得分统计图图片 -->
            <img
              id="scorelist-image"
              src=""
              alt="评分统计图"
              style="display: none; max-width: 100%; margin-top: 20px"
            />
            <!-- 添加一个显示情感分析图的 img 标签 -->
            <img
              id="sentiment-chart"
              src=""
              alt="情感分析图"
              style="display: none; width: 100%; max-width: 800px"
            />
          </div>

          <!-- 显示上传的数据 -->
          {% if data %}
          <div class="table-responsive">
            <table
              id="data-table"
              class="table table-bordered table-striped"
              style="display: none"
            >
              <!-- 默认隐藏 -->
              <thead>
                <tr>
                  <!-- 动态生成表头 -->
                  {% for column in data[0].keys() %}
                  <th>{{ column }}</th>
                  {% endfor %}
                </tr>
              </thead>
              <tbody>
                <!-- 动态生成表格行 -->
                {% for row in data %}
                <tr>
                  {% for value in row.values() %}
                  <td>{{ value }}</td>
                  {% endfor %}
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% endif %}
        </div>
      </main>
    </div>

    <!-- 提示信息弹出框 -->
    <div id="flash-container">
      {% with messages = get_flashed_messages(with_categories=true) %} {% if
      messages %} {% for category, message in messages %}
      <div class="flash-message" id="flash-message">{{ message }}</div>
      {% endfor %} {% endif %} {% endwith %}
    </div>

    <!-- 引入 jQuery 和 DataTables 插件 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/datatables.net@1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/datatables.net-bs4@1.10.21/js/dataTables.bootstrap4.min.js"></script>
    <!-- 引入外部 JavaScript 文件 -->
    <script src="{{ url_for('static', filename='js/exploration.js') }}"></script>
  </body>
</html>
